<!DOCTYPE html>
<html>
  <head>
    <title>❁</title>
    <style>
      div, body {
	  margin: 0;
	  padding: 0;
      }

      img {
	  user-select: none;
      }

      html {
	  width: 100vw;
	  height: 100vh;
	  overflow: hidden;
      }

      #picture {
	  --unit: calc(100vh / 90);
	  overflow: hidden;
	  height: calc(90 * var(--unit));
      }

      #picture h1 {
	  font-size: var(--unit);
      }

      #picture>*, .smile, .eyes, .center {
	  margin-left: auto;
	  margin-right: auto;
      }

      .flower {
	  position: relative;
	  top: calc(-75 * var(--unit));
	  width: calc(30 * var(--unit));
	  height: calc(30 * var(--unit));
      }

      .flower>* {
	  position: relative;
	  width: 0;
	  height: 0;
      }

      .center {
	  top: calc(15 * var(--unit));

	  animation-name: center-appear;
	  animation-duration: 0.4s;
	  animation-fill-mode: both;
      }

      .center::before {
	  content: "";
	  display: block;
	  width: calc(3 * var(--unit));
	  height: calc(3 * var(--unit));
	  background-color: orange;
	  border-radius: calc(1.5 * var(--unit));
	  position: relative;
	  top: calc(-1.5 * var(--unit));
	  left: calc(-1.5 * var(--unit));
      }

      @keyframes center-appear {
	  0% {
	      transform: scale(0);
	  }

	  100% {
	      transform: scale(1);
	  }
      }

      .petal {
	  top: calc(14.7 * var(--unit));
	  left: calc(15 * var(--unit));
      }

      .petal * {
	  width: calc(var(--subunit) * var(--unit));
	  animation-duration: 10s;
	  animation-timing-function: ease-out;
	  animation-fill-mode: both;
      }

      .petal>*{
	  position: relative;
	  top: calc(-3 * var(--subunit) * var(--unit));
	  left: calc(-0.5 * var(--subunit) * var(--unit));

	  transform-origin: 50% 100%;
	  animation-name: petal-rotate;
      }

      .petal>*>*{
	  position: relative;

	  animation-delay: inherit;
	  animation-name: petal-come-close;
      }

      @keyframes petal-rotate {
	  0% {
	      transform: rotate(0deg);
	  }

	  100% {
	      transform: rotate(var(--end-deg));
	  }
      }

      @keyframes petal-come-close {
	  0% {
	      bottom: calc(15 * var(--unit));
	  }

	  100% {
	      bottom: 0;
	  }
      }

      .smile {
	  top: calc(20 * var(--unit));
      }

      .eyes {
	  top: calc(5 * var(--unit));
      }

      .smile>*, .eyes>* {
	  position: relative;
	  width: calc(17 * var(--unit));
	  left: calc(-8.5 * var(--unit));
	  top: calc(-3 * var(--unit));
	  animation-fill-mode: both;
      }

      .smile>* {
	  animation-name: appear;
	  animation-duration: 0.3s;
      }

      @keyframes appear {
	  0% {
	      transform: scaleY(0);
	  }

	  100% {
	      transform: scaleY(1);
	  }
      }

      .eyes>* {
	  transform-origin: 50% calc(10.5 * var(--unit));
	  animation-name: eyes-blink;
	  animation-duration: 4s;
	  animation-iteration-count: infinite;
      }

      @keyframes eyes-blink {
	  0%, 100% {
	      transform: scaleY(0);
	  }

	  7.5%, 92.5% {
	      transform: scaleY(1);
	  }
      }

      .stem {
 	  position: relative;
	  top: calc(15 * var(--unit));
	  background-color: #495;
	  border-left: solid calc(0.5 * var(--unit)) #252;
	  border-right: solid calc(0.5 * var(--unit)) #252;
	  width: var(--unit);
	  height: calc(75 * var(--unit));

	  transform-origin: 50% calc(0 * var(--unit));
	  animation-name: appear;
	  animation-duration: 0.6s;
	  animation-fill-mode: both;
      }

      .wesolych, .wszystkich {
	  position: relative;
	  width: 0;
	  height: 0;
	  top: calc(-55 * var(--unit));

	  animation-name: appear;
	  animation-duration: 0.4s;
	  animation-fill-mode: both;
      }

      .wszystkich {
	  top: calc(-35 * var(--unit));
      }

      .wesolych>*, .wszystkich>* {
	  position: relative;
	  width: calc(42 * var(--unit));
	  left: calc(-21 * var(--unit));

	  transform-origin: 50% 100%;
	  animation-name: bounce;
	  animation-direction: alternate;
	  animation-iteration-count: infinite;
	  animation-duration: 1.5s;
	  animation-fill-mode: both;
	  animation-timing-function: cubic-bezier(0.01, 0.29, 0, 0.96);
      }

      @keyframes bounce {
	  0% {
	      transform: scaleY(0.7);
	  }

	  100% {
	      transform: scaleY(1.2);
	  }
      }
    </style>
  </head>
  <body>
    <div id="picture">
<IMPORT stem.html/>
      <div class="flower">
<IMPORT center.html/>
<IMPORT petals.html/>
<IMPORT face.html/>
      </div>
<IMPORT text.html/>
    </div>
  </body>
</html>
